<template>
    <el-form
        ref="formRef"
        :model="formData"
        :rules="formRules"
        label-width="10em"
    >
        <el-row type="flex" :gutter="10">
            <el-col :span="24">
                <el-form-item label="分类图标" prop="imgList">
                    <el-upload-image
                        v-model="formData.imgList"
						:title="title"
                    ></el-upload-image>
                </el-form-item>
            </el-col>
			<!-- <el-col :span="12">
			    <el-form-item label="分类上级" prop="parent_id">
			        <el-cascader
			           v-model="formData.parent_id"
			           :options="options"
					   :props="{
					       value:'id',
					       label:'name'}"
			           @change="handleChange">
					   </el-cascader>
			    </el-form-item>
			</el-col> -->
            <el-col :span="12">
                <el-form-item label="分类名称" prop="name">
                    <el-input
                        v-model="formData.name"
                        placeholder="请输入分类名称"
                        type="text"
                        clearable
                    ></el-input>
                </el-form-item>
            </el-col>
			<!-- is_group   是否团购 0否 1是 -->
			<el-col :span="12" >
				<el-form-item label="是否团购" prop="is_group">
					<el-radio-group v-model="formData.is_group">
						<el-radio :label="0">否</el-radio>
						<el-radio :label="1">是</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-col>
			<!-- <el-col :span="12">
			   <el-form-item label="赠送积分比例(%)" prop="score_rate">
			        <el-input
			            v-model="formData.score_rate"
			            clearable
						type="number"
			            placeholder="100% 填100，1.5% 填1.5 ，0为不赠送"
			        ></el-input>
			    </el-form-item>
			</el-col> -->
            <el-col :span="12">
                <el-form-item label="排序" prop="sort">
                    <el-input
                        v-model="formData.sort"
                        placeholder="请输入排序号"
                        type="text"
                        clearable
                    ></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="启用状态" prop="status">
                    <el-switch
                        v-model="formData.status"
                        :active-value="1"
                        :inactive-value="0"
                    ></el-switch>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row type="flex" justify="center">
            <el-button type="primary" icon="el-icon-check" @click="onConfirm"
                >确认</el-button
            >
            <el-button type="default" icon="el-icon-close" @click="onCancel"
                >取消</el-button
            >
        </el-row>
    </el-form>
</template>

<script>
import { post,get } from "@/assets/js/http.js";

export default {
    name: "goods-type-add",
    components: {
        ElUploadImage: () => import("@/components/el-upload-image.vue")
    },
    data() {
        return {
            props: {
                label: "name",
                value: "id",
                children: "children",
                checkStrictly: true
            },
            formData: {
                imgList: [],
                image_id: "",
                name: "",
                sort: "",
                status: 1,
				// score_rate:'',
				is_group:null,
            },
            formRules: {
				imgList: [{
					required: true,
					message: '请输入',
					trigger: 'change'
				}],
                name: [
                    {
                        required: true,
                        message: "此项为必填项"
                    }
                ],
				is_group:[{
					required: true,
					message: '请选择',
					trigger: 'change'
				}],
				// parent_id: [{
				// 	required: true,
				// 	message: '请选择',
				// 	trigger: 'change'
				// }],
				// score_rate: [
    //                 {
    //                     required: true,
    //                     message: "此项为必填项"
    //                 }
    //             ],
                sort: [
                    {
                        required: true,
                        message: "此项为必填项"
                    },
                    {
                        pattern: /^[1-9]\d*$/,
                        message: "只能输入正整数"
                    }
                ],
                status: {
                    required: true,
                    message: "此项为必填项"
                }
            },
			options:[],
			title:'请上传 112rpx * 104rpx 的图片'
        };
    },
	mounted(){
		// this.getoptions()
	},
    methods: {
        onConfirm() {
            this.$refs.formRef.validate(async isValid => {
                if (isValid) {
                    const formData = JSON.parse(JSON.stringify(this.formData));
					// formData.parent_id = formData.parent_id[0]
					console.log(formData)
                    if (formData.imgList.length > 0) {
                        formData.image_id =
                            formData.imgList[0].id;
                    }
                    await post({
                        url: "/admin/shop.MerchGoodsCategory/add",
                        data: formData,
                        loading: true,
                        successTip: true
                    });
                    this.$emit("update");
                    this.$parent.$emit("update:visible", false);
                    this.$refs.formRef.resetFields();
                }
            });
        },
        onCancel() {
            this.$parent.$emit("update:visible", false);
            this.$refs.formRef.resetFields();
        },
		//获取父类
		getoptions(){
			get({
				url:'/admin/shop.GoodsCategory/levelCate',
				params:{
					limit:999
				},
			}).then(res=>{
				this.options = res.list
			})
		},
		 handleChange(value) {
		        console.log(value);
		      }
    }
};
</script>
